<template>
  <div>
    <div class="prompt border-bottom">
      <h3>消息</h3>
    </div>
    <ul class="information">
      <router-link
        :to="{ name: tt }"
        class="tabulation"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="tiaozhuan" @click="determine(item.name)">
          <div class="picture">
            <img :src="item.icon" alt="" />
          </div>
          <div class="tabulation_right">
            <p class="name">{{ item.name }}</p>
            <p class="title">{{ item.title }}</p>
          </div>
          <span class="time">{{ item.time }}</span>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          icon: "https://cdn7.axureshop.com/demo/1763441/images/%E9%A6%96%E9%A1%B5/u154.png",
          name: "杨爱明",
          title: "你好，最近测量过体温吗？",
          time: "2021-05-10:34:13",
        },
        {
          icon: "https://img0.baidu.com/it/u=3707843208,2361422744&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500",
          name: "系统通知",
          title: "系统升级通知",
          time: "2021-05-10:34:13",
        },
      ],
      tt: "",
    };
  },
  methods: {
    determine(name) {
      console.log(1111);
      if (name == "系统通知") {
        this.tt = "systemNotifications";
        // this.$router.push({ name: "systemNotifications" });
      } else {
        this.tt = "chat";
        // this.$router.push({ name: "chat" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
* {
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style: none;
  
}

.prompt {
  width: 100%;
  height: vw(44);
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 1);
  // border-bottom: 1px solid rgba(242, 242, 242, 1);
  h3 {
    padding-left: vw(20);
    padding-top: vw(15);
    box-sizing: border-box;
    font-family: "MicrosoftYaHei", "微软雅黑";
    font-weight: 400;
    font-size: vw(16);
  }
}
.information {
  width: 100%;
  background-color: #f2f2f2;
  position: relative;
  top: vw(44);
  left: 0;
}
.tabulation {
  height: vw(80);
  width: 100%;
  position: relative;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(242, 242, 242, 1);
  display: flex;

  .tiaozhuan {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: vw(20);
    padding-left: vw(10);
    box-sizing: border-box;
    cursor: pointer;
  }
  .picture {
    width: vw(50);
    height: vw(50);
    // background-color: #5d9447;
    border-radius: 50%;
    margin-right: vw(15);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tabulation_right {
    .name {
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
      font-weight: 700;
      font-style: normal;
      font-size: vw(14);
      padding-bottom: vw(5);
      color: #000;
    }
    .title {
      font-family: "MicrosoftYaHei", "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(14);
      color: #999999;
      line-height: vw(28);
    }
  }
  .time {
    font-family: "微软雅黑";
    font-weight: 400;
    font-size: vw(12);
    color: #999999;
    position: absolute;
    top: vw(15);
    right: vw(10);
  }
}
</style>
